<template>
    <div id="app" class="update-page">

        <scroll-fixed>
            <page-bar>
                <div slot="middle" class="header-middle">修改密码</div>
                <a slot="right" href="javascript:;" class="complete-btn" @click="update">完成</a>
            </page-bar>
        </scroll-fixed>

        <div class="gap"></div>
        <section>
            <div>
                旧密码
            </div>
            <div class="pwd-box">
                <input :type="oldType" v-model="oldPwd">
                <i class="icon icon-close-eye" @click="showPwd('old')" v-if="!oldPwdShow"></i>
                <i class="icon icon-eye" @click="hidePwd('old')" v-if="oldPwdShow"></i>
            </div>
        </section>
        <div class="gap"></div>
        <section>
            <div>
                新密码
            </div>
            <div class="pwd-box">
                <input :type="newType" v-model="newPwd">
                <i class="icon icon-close-eye" @click="showPwd('new')" v-if="!newPwdShow"></i>
                <i class="icon icon-eye" @click="hidePwd('new')" v-if="newPwdShow"></i>
            </div>
        </section>
    </div>
</template>

<script>
import scrollFixed from "../components/scrollFixed.vue";
import pageBar from "../components/pagebar.vue";
export default {
    name: "updatePwd",
    components: {
        [scrollFixed.name]: scrollFixed,
        [pageBar.name]: pageBar
    },
    data() {
        return {
            oldType: "password",
            newType: "password",
            oldPwdShow: false,
            newPwdShow: false,
            oldPwd: "",
            newPwd: ""
        };
    },
    created() {},
    methods: {
        showPwd(type) {
            if (type === "new") {
                this.newType = "text";
                this.newPwdShow = true;
            }
            if (type === "old") {
                this.oldType = "text";
                this.oldPwdShow = true;
            }
        },

        hidePwd(type) {
            if (type === "new") {
                this.newType = "password";
                this.newPwdShow = false;
            }
            if (type === "old") {
                this.oldType = "password";
                this.oldPwdShow = false;
            }
        },

        update () {
            if(!this.oldPwd) {
                this.$toast("请输入旧密码");
            } else if(!this.newPwd) {
                this.$toast("请输入新密码");
            }  else {
                let _data = {
                    old_password:this.oldPwd,
                    new_password:this.newPwd,
                }

                this.$http.post('?ct=member_center&ac=edit_password', _data).then( res => {
                    let data = res.data;
                    if (data.code !==0) {
                        this.$toast(data.msg);
                    } else {
                        this.$toast("修改成功");
                        setTimeout(() => {
                            window.location.href = this.$config.pages.myCenter;
                        }, 1000)
                    }
                });
            }
        }
    }
};
</script>

<style lang="less">
.update-page {
    display: flex;
    flex-direction: column;
    background-color: #fff;

    .header-middle {
        font-size: 36px;
        color: #333;
    }

    .complete-btn {
        font-size: 30px;
        color: #e64a19;
        line-height: 1.093333rem;
    }

    .gap {
        height: 20px;
        background-color: #f6f6f6;
    }

    section {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 30px;
        div:first-child {
            color: #000;
            font-size: 32px;
        }
        div:last-child {
            display: flex;
            align-items: center;
        }
        .pwd-box {
            input {
                font-size: 32px;
                text-align: right;
                color: #666;
                caret-color: red;
                border:none;
            }
            .icon {
                display: inline-block;
                margin-left: 30px;
                background-size: 100% 100%;
            }
            .icon-close-eye {
                width: 28px;
                height: 27px;
                background-image: url("../assets/icon-close-eye.png");
            }
            .icon-eye {
                width: 29px;
                height: 19px;
                background-image: url("../assets/icon-eye.png");
            }
        }
    }
}
</style>


